<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>首页</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/common.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    <style type="text/css">
        body {
            background: #f4f4f4;
            background-position: center;
            background-size: cover;
            position: relative;
            font-size: 13px;

        }

        /*分类*/
        .contain {
            line-height: 1.4;
            background: #fff;
            overflow: hidden;
        }

        .contain-left {
            width: 25%;
            text-align: center;
            float: left;
        }

        .contain-left .aui-list-view-cell {
            padding: 12px;

        }

        .contain .aui-list-view:after {
            border: none;
        }

        .contain-left .active {
            color: #fa5354;
            border: none;
            background: #f3f3f2
        }

        .contain-left, .contain-right {
            overflow-y: auto;
            height: 100%;
        }

        .contain-right {
            padding: 12px;
            width: 75%;
            float: left;
            display: inline-block;
        }

        .contain .aui-content {
            overflow-y: auto;
            position: relative;
        }

        .contain-right .pic img {
            width: 100%;
        }

        .tuijian-title {
            padding: 8px;
        }

        .tuijian {
            position: relative;
        }

        .other {
            display: none;
            text-align: center;
            overflow-y: hidden;
        }

        .other ul {
            position: relative;
            overflow-y: hidden;
        }

        .other .aui-list-view-cell {
            padding: 8px 0;
        }

        .other .aui-list-view-cell:after {
            border: none;
        }

        .aui-icon-sort {
            font-size: 20px !important;
        }

        .contain {
            height: 100%;
        }

        .fenlei {
        }

        .other-title {
            padding: 15px;
            font-size: 14px;
            font-weight: 400;
            width: 100%;
            display: inline-block;
            position: relative;
        }
    </style>
</head>
<body>
<!-- 分类 -->
<div class="fenlei">
    <div class="contain  mui-row mui-fullscreen">
        <div class="contain-left mui-col-xs-3">
            <div class="aui-content">
                <ul class="aui-list-view" id='Category-content'>
                    <!--一级分类-->
                  <!--   <li class='aui-list-view-cell aui-ellipsis-1 {{? i == 0}}active{{?}}' tapmode
                        onclick='changeCategory(this)'>
                        这个
                    </li>
                    <li class='aui-list-view-cell aui-ellipsis-1 {{? i == 0}}active{{?}}' tapmode
                        onclick='changeCategory(this)'>
                        这个
                    </li>
                    <li class='aui-list-view-cell aui-ellipsis-1 {{? i == 0}}active{{?}}' tapmode
                        onclick='changeCategory(this)'>
                        这个
                    </li>
                    <li class='aui-list-view-cell aui-ellipsis-1 {{? i == 0}}active{{?}}' tapmode
                        onclick='changeCategory(this)'>
                        这个
                    </li>
                    <li class='aui-list-view-cell aui-ellipsis-1 {{? i == 0}}active{{?}}' tapmode
                        onclick='changeCategory(this)'>
                        这个
                    </li> -->

                </ul>
            </div>
        </div>
        <div class="contain-right mui-col-xs-9">

            <div class="pic">
                <img src="" alt="" id="categoryImage">
            </div>
            <div class="tuijian" id='Hot-content'>
                <!-- 推荐 热门分类 -->
                <!-- <div class="aui-content">
                    <div class="tuijian-title aui-ellipsis-1">热销</div>
                    <ul class="aui-list-view aui-grid-view">
                        
                        <li class="aui-list-view-cell aui-img aui-col-xs-4" >
                        <img class="aui-img-object" src="../image/shili.jpg">

                        <div class="aui-img-body aui-ellipsis-1">
                            热销1
                        </div>
                        </li>
                        <li class="aui-list-view-cell aui-img aui-col-xs-4" >
                        <img class="aui-img-object" src="../image/shili.jpg">

                        <div class="aui-img-body aui-ellipsis-1">
                            热销1
                        </div>
                        </li>
                        <li class="aui-list-view-cell aui-img aui-col-xs-4" >
                        <img class="aui-img-object" src="../image/shili.jpg">

                        <div class="aui-img-body aui-ellipsis-1">
                            热销1
                        </div>
                        </li>
                        <li class="aui-list-view-cell aui-img aui-col-xs-4" >
                        <img class="aui-img-object" src="../image/shili.jpg">

                        <div class="aui-img-body aui-ellipsis-1">
                            热销1
                        </div>
                        </li>
                    </ul>
                </div> -->

            </div>
            <!-- 非热门 -->
            <div class="other" id="Other-content">
                <!--二三级分类-->



            </div>
        </div>
    </div>
</div>
<script id="Category-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <li class='aui-list-view-cell aui-ellipsis-1 {{? i == 0}}active{{?}} {{? i > 0}}aui-border-r{{?}}' tapmode
        onclick='changeCategory(this), categorySubordinate({{=it[i].catid}})'>
        {{=it[i].catname}}
    </li>
    {{ } }}
</script>
<script id="Hot-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <div class="aui-content">
        <div class="tuijian-title aui-ellipsis-1">{{=it[i].catname}}</div>
        <ul class="aui-list-view aui-grid-view">
            {{ for(var b in it[i].arr) { }}
            <li class="aui-list-view-cell aui-img aui-col-xs-4"
                {{? it[i].catname== '品牌推荐'}}
                    onclick='toBrandList({{=it[i].arr[b].itemid}})'
                {{??}}
                    onclick='toCategoryList({{=it[i].arr[b].catid}})'
                {{?}}
            >
            <img class="aui-img-object" src="
                {{? it[i].catname == '品牌推荐'}}
                {{=it[i].arr[b].thumb}}
                {{??}}
                {{=it[i].arr[b].image_src}}
                {{?}}
                ">

            <div class="aui-img-body aui-ellipsis-1">
                {{? it[i].catname == '品牌推荐'}}
                {{=it[i].arr[b].title}}
                {{??}}
                {{=it[i].arr[b].catname}}
                {{?}}
            </div>
            </li>
            {{ } }}
        </ul>
    </div>
    {{ } }}
</script>
<script id="Other-template" type="text/x-dot-template">
    {{ for(var i in it) { }}
    <div class="other-list">
        <div class="other-title aui-border-b aui-ellipsis-1">
            {{=it[i].catname}}
        </div>
        <ul>
            {{ for(var b in it[i].arr) { }}
            <li class="aui-list-view-cell aui-img aui-col-xs-4" onclick="toCategoryList({{=it[i].arr[b].catid}})">
                <div class="aui-img-body aui-ellipsis-1">
                    {{=it[i].arr[b].catname}}
                </div>
            </li>
            {{ } }}
        </ul>
    </div>
    {{ } }}
</script>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/myInfo.js"></script>
<script type="text/javascript" src="../script/doT.min.js"></script>
<script type="text/javascript" src="../script/echo.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript">
    apiready = function () {
        api.parseTapmode();
        // getTrade();
        // getBrand();
        // getMarket();
        hotCategory();
        categoryImage();
    }

    // function getTrade() {
    //     var data = {};
    //     var url = 'index/getTrade';
    //     ajaxRequest(url, 'get', data, function (ret, err) {
    //         if (ret.status == 1) {
    //             var content = $api.byId('Trade-content');
    //             var tpl = $api.byId('Trade-template').text;
    //             var tempFn = doT.template(tpl);
    //             $api.html(content, '');
    //             $api.prepend(content, tempFn(ret.msg));
    //             //图片延时加载
    //             echo.init({
    //                 offset: 0,
    //                 throttle: 250
    //             });
    //         } else {
    //             api.toast({
    //                 msg: ret.msg,
    //                 duration: 2000,
    //                 location: 'bottom'
    //             })
    //         }
    //     })
    // }
    ///切换左侧分类的样式

    //$(document).on("click",".contain-left li",function(){
    function changeCategory(obj) {
        $(".contain-left li").removeClass("active").addClass("aui-border-l").addClass("aui-border-r");
        $(obj).addClass("active").removeClass("aui-border-l").removeClass("aui-border-r");
        if ($(obj).index() == 0) {
            $(".tuijian").css({"display": "block"});
            $(".other").css({"display": "none"});
        } else {
            $(".tuijian").css({"display": "none"});
            $(".other").css({"display": "block"});
        }
    }
    //导航上面的分类控制显示隐藏
    // function Category() {
    //     if ($(".fenlei").css("display") == "none") {
    //         $(".fenlei").css({"display": "block"});
    //         $(".content").css({"display": "none"});
    //     } else {
    //         $(".content").css({"display": "block"});
    //         $(".fenlei").css({"display": "none"});
    //     }
    // }
    // function getBrand() {
    //     var data = {};
    //     var url = 'index/getBrand';
    //     ajaxRequest(url, 'get', data, function (ret, err) {
    //         if (ret.status == 1) {
    //             var content = $api.byId('Brand-content');
    //             var tpl = $api.byId('Brand-template').text;
    //             var tempFn = doT.template(tpl);
    //             $api.html(content, '');
    //             $api.prepend(content, tempFn(ret.msg));
    //             //图片延时加载
    //             echo.init({
    //                 offset: 0,
    //                 throttle: 250
    //             });
    //         } else {
    //             api.toast({
    //                 msg: ret.msg,
    //                 duration: 2000,
    //                 location: 'bottom'
    //             })
    //         }
    //     })
    // }

    // function getMarket() {
    //     var data = {};
    //     var url = 'index/getMarket';
    //     ajaxRequest(url, 'get', data, function (ret, err) {
    //         if (ret.status == 1) {
    //             var content = $api.byId('Market-content');
    //             var tpl = $api.byId('Market-template').text;
    //             var tempFn = doT.template(tpl);
    //             $api.html(content, '');
    //             $api.prepend(content, tempFn(ret.msg));
    //             //图片延时加载
    //             echo.init({
    //                 offset: 0,
    //                 throttle: 250
    //             });
    //         } else {
    //             api.toast({
    //                 msg: ret.msg,
    //                 duration: 2000,
    //                 location: 'bottom'
    //             })
    //         }
    //     })
    // }

    function doSearch() {
        $api.addCls($api.dom(".aui-searchbar-wrap"), "focus");
        $api.dom('.aui-searchbar-input input').focus();
    }
    function cancelSearch() {
        $api.removeCls($api.dom(".aui-searchbar-wrap.focus"), "focus");
        $api.val($api.byId("search-input"), '');
        $api.dom('.aui-searchbar-input input').blur();
    }
    function clearInput() {
        $api.val($api.byId("search-input"), '');
    }
    function search() {
        var content = $api.val($api.byId("search-input"));
        if (content) {
            api.alert({
                title: '搜索提示',
                msg: '您输入的内容为：' + content
            });
        } else {
            api.alert({
                title: '搜索提示',
                msg: '您没有输入任何内容'
            });
        }
        cancelSearch();
    }
    function funcGotoBakHome(index) {
        getStorageAll();
        if (user_id) {
            api.execScript({
                name: 'root',
                script: 'randomSwitchBtnBakHome(' + index + ')'
            });
        } else {
            openTo('login_win');
        }
    }
    //提示信息
    function message() {
        api.toast({
            msg: '暂不支持',
            duration: 2000,
            location: 'middle'
        });
    }

    function tobrand() {
        api.openWin({
            name: 'pinpaishang_win',
            url: 'pinpaishang_win.html',
            reload: true,
            delay: 300
        });
    }

    
        //增加商品推荐分类及一级分类
        function hotCategory() {
            showLoading();
            var data = {
                'moduleid': '16',
            };
            var url = 'category/categoryOne';
            ajaxRequest(url, 'get', data, function (ret, err) {
                if (ret.status == 1) {
                    var content = $api.byId('Category-content');
                    var tpl = $api.byId('Category-template').text;
                    var tempFn = doT.template(tpl);
                    $api.html(content, '');
                    $api.prepend(content, tempFn(ret.msg));
                    //商品推荐
                    var content = $api.byId('Hot-content');
                    var tpl = $api.byId('Hot-template').text;
                    var tempFn = doT.template(tpl);
                    $api.html(content, '');
                    $api.prepend(content, tempFn(ret.msg[0].arr));
                    hideLoading();
                    //图片延时加载
                    echo.init({
                        offset: 0,
                        throttle: 250
                    });
                } else {
                    hideLoading();
                    api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'bottom'
                    })
                }
            })
        }

        //增加分类下面下级分类
        function categorySubordinate(catid) {
            showLoading();
            var data = {};
            if (catid == '' || catid == null) {
                categoryImage();
            }
            var url = 'category/categorysubordinate/moduleid/16/parentid/' + catid;
            ajaxRequest(url, 'get', data, function (ret, err) {
                var content = $api.byId('Other-content');
                $api.html(content, '');
                if (ret.status == 1) {
                    var tpl = $api.byId('Other-template').text;
                    var tempFn = doT.template(tpl);
                    $api.prepend(content, tempFn(ret.msg.arr));
    //                var categoryImage = $api.byId('categoryImage');
                    $('#categoryImage').attr('src', ret.msg.top_src);
                    hideLoading();
                    //图片延时加载
                    echo.init({
                        offset: 0,
                        throttle: 250
                    });
                } else {
                    hideLoading();
                    if (catid) {
                        api.toast({
                            msg: '数据为空',
                            duration: 2000,
                            location: 'bottom'
                        })
                    }

                }
                if (err) {
                    hideLoading();
                    if (catid) {
                        api.toast({
                            msg: '网络错误',
                            duration: 2000,
                            location: 'bottom'
                        })
                    }
                }
            })
        }

        //商品推荐分类顶图
        function categoryImage() {
            var data = {
                'pid': '29'
            };
            var url = 'category/categoryImage';
            ajaxRequest(url, 'get', data, function (ret, err) {
                if (ret.status == 1) {
                    $('#categoryImage').attr('src', ret.msg);
                } else {
                    api.toast({
                        msg: ret.msg,
                        duration: 2000,
                        location: 'bottom'
                    })
                }
            })
        }


    //打开商品列表
    function toCategoryList(catId)
    {
        api.openWin({
            name : 'categoryList_win',
            url : 'categoryList_win.html',
            pageParam : {
                categoryId : catId
            },
            delay : 300
        });
    }
</script>
</html>